import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Input, Card, Form } from 'antd';
import TagSelect from '@/components/TagSelect';
import StandardFormRow from '@/components/StandardFormRow';
import Result from '@/components/Result';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

@Form.create()
@connect()
class AntDesignProDemo extends Component {
  handleFormSubmit = () => {
    const { form } = this.props;
    // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候
    setTimeout(() => {
      form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
        }
      });
    }, 0);
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const breadcrumbList = [{ title: '首页', href: '/' }, { title: 'demo' }];
    const tabList = [
      { key: 'file', tab: '政策文件' },
      { key: 'quota', tab: '指标' },
      { key: 'article', tab: '文章报道' },
    ];
    return (
      <PageHeaderWrapper
        // title="当前位置："
        // breadcrumbList={breadcrumbList}
        // hiddenBreadcrumb
        to="/"
        loading={false}
        content={<Input.Search enterButton="搜索" style={{ width: '10rem' }} />}
        extraContent={[
          <Button key="Cancel">Cancel</Button>,
          <Button key="Submit" type="primary">
            Submit
          </Button>,
        ]}
        tabList={tabList}
        tabActiveKey="file"
        tabBarExtraContent={<Button type="primary">Normal</Button>}
      >
        <Card>
          <Form layout="inline" style={{ padding: '0.2rem' }}>
            <StandardFormRow title="所属类目" block>
              <Form.Item>
                {getFieldDecorator('category')(
                  <TagSelect onChange={this.handleFormSubmit} expandable>
                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
                  </TagSelect>
                )}
              </Form.Item>
            </StandardFormRow>
            <StandardFormRow title="引用热度" last>
              <Form.Item>
                {getFieldDecorator('referenceTimes', {
                  initialValue: '',
                })(
                  <TagSelect onChange={this.handleFormSubmit}>
                    <TagSelect.Option value="1">高</TagSelect.Option>
                    <TagSelect.Option value="2">中</TagSelect.Option>
                    <TagSelect.Option value="3">低</TagSelect.Option>
                  </TagSelect>
                )}
              </Form.Item>
            </StandardFormRow>
          </Form>
          <Result
            type="success"
            title="提交成功"
            description="提交结果页用于反馈一系列操作任务的处理结果，
            如果仅是简单操作，使用 Message 全局提示反馈即可。
            本文字区域可以展示简单的补充说明，如果有类似展示
            “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
            extra={<span>extra</span>}
            actions={[
              <Button key="Cancel">Cancel</Button>,
              <Button key="Submit" type="primary">
                Submit
              </Button>,
            ]}
            style={{ marginTop: 48, marginBottom: 16 }}
          />
        </Card>
        <FooterToolbar extra="extra information">
          <Button>Cancel</Button>
          <Button type="primary">Submit</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default AntDesignProDemo;
